<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      svg {
        border: 1px solid red;
      }

      line,
      polyline,
      rect {
        stroke-linecap: round;
        stroke-linejoin: round;
      }
    </style>
  </head>

  <body>
    <svg width="300"
         height="300"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         preserveAspectRatio="xMinYMin meet"
         viewBox="0 0 300 300">
      <!-- image元素 -->
      <ellipse cx="154"
               cy="154"
               rx="150"
               ry="120"
               style="fill: #999999;" />
      <ellipse cx="152"
               cy="152"
               rx="150"
               ry="120"
               style="fill: #cceeff;" />
      <image xlink:href="/source/sky.jpg"
             x="72"
             y="92"
             width="160"
             height="120"
             preserveAspectRatio="xMaxYMin meet" />


    </svg>
  </body>

</html>
